<template>
  <div class="app-container">
    <header class="app-header">
      <div class="nav-container">
        <div class="logo-title">
          <img :src="require('../assets/picture/0.jpg')" alt="系统Logo" class="logo" />
          <div class="system-title">DLNU研究生奖学金管理系统</div>
        </div>
        <nav>
          <ul>
            <li><router-link to="/fst">首页</router-link></li>
            <li><a href="/awards.pdf" target="_blank" rel="noopener noreferrer">评选制度</a></li>
            <li><span>获奖名单</span></li>
            <li><span>常见问题</span></li>
          </ul>
        </nav>
      </div>
    </header>

    <main class="app-main">
      <div class="content-container">
        <section class="announcement-section">
          <h2 class="section-title">公告通知</h2>
          <div class="announcement-list">
            <div
              class="announcement-item"
              v-for="(item, index) in announcements"
              :key="index"
            >
              <div class="announcement-date">
                <div class="date-day">{{ item.day }}</div>
                <div class="date-year">{{ item.year }}</div>
              </div>
              <div class="announcement-content">
                <div class="announcement-title">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </section>

        <section class="login-section">
          <h3 class="login-title">系统登录</h3>
          <div class="button-group">
            <button class="btn btn-primary" @click="showLogin = true">登录/注册</button>
            <el-button class="btn btn-secondary" @click="showQuery = true">快速查询</el-button>
          </div>
          <LogIn v-if="showLogin" @close="showLogin = false" />
          <QueryStu v-if="showQuery" @close="showQuery = false" />
        </section>
      </div>
    </main>

    <footer class="app-footer">
      <div>奖助学金系统</div>
      <div>© 2025 奖学金管理系统 版权所有</div>
    </footer>
  </div>
</template>

<script>
import LogIn from '@/views/Sed/LogIn.vue'
import QueryStu from '@/views/Sed/QueryStu.vue'

export default {
  name: 'FstView',
  components: { LogIn, QueryStu },
  data() {
    return {
      showLogin: false,
      showQuery: false,
      announcements: [
        {
          day: '12-28',
          year: '2024',
          title: '我校举行"WIFFA"大学生奖学金捐赠暨发放仪式',
        },
        {
          day: '05-04',
          year: '2022',
          title: '我校学子连续五年荣登《人民日报》国家奖学金获奖学生代表名录',
        },
        {
          day: '05-06',
          year: '2021',
          title: '我校学子连续四年荣登《人民日报》本专科生国家奖学金获奖学生代表名录',
        },
      ],
      bgImages: [
        require('../assets/picture/1.jpg'),
        require('../assets/picture/2.jpg'),
        require('../assets/picture/3.jpg'),
        require('../assets/picture/4.jpg'),
      ],
      currentBg: 0,
      bgLayers: [],
      bgInterval: null,
    }
  },
  mounted() {
    this.initBackground()
    this.bgInterval = setInterval(() => {
      this.changeBackground()
    }, 5000)
  },
  beforeUnmount() {
    clearInterval(this.bgInterval)
    const bgContainer = document.getElementById('bg-container')
    if (bgContainer) document.body.removeChild(bgContainer)
  },
  methods: {
    initBackground() {
      const bgContainer = document.createElement('div')
      bgContainer.id = 'bg-container'
      Object.assign(bgContainer.style, {
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        zIndex: -1,
      })

      this.bgLayers = this.bgImages.map((img, index) => {
        const layer = document.createElement('div')
        Object.assign(layer.style, {
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundImage: `url(${img})`,
          opacity: index === 0 ? 1 : 0,
          transition: 'opacity 1.5s ease-in-out',
        })
        bgContainer.appendChild(layer)
        return layer
      })

      document.body.appendChild(bgContainer)
    },
    changeBackground() {
      const nextIndex = (this.currentBg + 1) % this.bgImages.length
      this.bgLayers[this.currentBg].style.opacity = 0
      this.bgLayers[nextIndex].style.opacity = 1
      this.currentBg = nextIndex
    },
  },
}
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.app-header {
  background-color: #1e3a8a;
  color: white;
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo {
  height: 50px;
  width: auto;
  object-fit: contain;
}

.system-title {
  font-size: 24px;
  font-weight: bold;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 25px;
  margin: 0;
  padding: 0;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  padding: 5px 0;
  position: relative;
  transition: color 0.3s;
}

nav a:hover {
  color: #93c5fd;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #93c5fd;
  transition: width 0.3s;
}

nav a:hover::after {
  width: 100%;
}

.app-main {
  flex: 1;
  padding: 20px 0;
  width: 100%;
}

.content-container {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.announcement-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 20px;
  color: #1e3a8a;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1e3a8a;
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.announcement-item {
  display: flex;
  gap: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e5e7eb;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.announcement-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.announcement-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
}

.date-day {
  font-size: 24px;
  font-weight: bold;
  color: #1e3a8a;
}

.date-year {
  font-size: 14px;
  color: #6b7280;
}

.announcement-content {
  flex: 1;
}

.announcement-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #111827;
}

.login-section {
  width: 300px;
  background-color: #f8fafc;
  border-radius: 10px;
  padding: 25px;
  border: 1px solid #e5e7eb;
  margin: 0 auto;
}

.login-title {
  text-align: center;
  font-size: 18px;
  color: #1e3a8a;
  margin-bottom: 20px;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.btn {
  padding: 12px;
  border-radius: 6px;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  text-decoration: none;
  display: block;
}

.btn-primary {
  background-color: #1e3a8a;
  color: white;
}

.btn-primary:hover {
  background-color: #1e40af;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.btn-secondary {
  background-color: #e5e7eb;
  color: #1f2937;
}

.btn-secondary:hover {
  background-color: #d1d5db;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.app-footer {
  background-color: #1e3a8a;
  color: white;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
}

@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    gap: 15px;
  }

  nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }

  .content-container {
    width: 100%;
    border-radius: 0;
    padding: 15px;
  }

  .login-section {
    width: 100%;
  }
}
</style>